<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" id="file" name="img">
        <img src="" alt="" id="img" width="100px">
        <button type="submit">上传</button>
    </form>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script>
        // var file=document.getElementById("file")
        // var img=document.getElementById("img")
        // file.onchange=function(){
        //     console.log(this.files[0])
        //    var fd=new FileReader()
        //    console.dir(fd)
        //    fd.readAsDataURL(this.files[0])
        //    fd.onload=function(){
        //        /*
        //        文件读取完成时触发

        //        */

        //        img.src=this.result
        //    }
        // }
        $('#file').change(function(){
            var fd=new FileReader()
            fd.readAsDataURL(this.files[0])
            fd.onload=function(){

            $('#img').attr("src",this.result)
            // $('img')[0].src=this.result
            }
         } )

        $('button').click(function () {
            if (!$('input')[0].files[0]) {
                alert('需要上传图片')
                return false
            }

            // var Formdata = new FormData
            // Formdata.append('img', $('input')[0].files[0])
            // $.ajax("/upload", {
            //     method: 'POST',
            //     dataType: 'json',
            //     processData: false,
            //     contentType: false,
            //     data: FormData,
            //     success: function (res) {
            //         // alert('上传成功')
            //     }
            // })


        })

    </script>


</body>

</html>